<template>
	<view class="goods">

		<view class="goods-view">
			<image :src="goodsInfo.goodsPhoto" mode="" class="good-img"></image>
			<view class="goods-info-view">
				<view class="name">{{goodsInfo.goodsName}}</view>
				<view class="introduce">{{goodsInfo.goodsDescribe}}</view>
				<view class="tag">
					{{goodsInfo.degree}}
				</view>
				<view class="price">￥{{goodsInfo.newPrice}}</view>

			</view>

		</view>

		<u-line class="line"></u-line>
		<view class="buttons">
			<u-button type="primary" :plain="true" shape="circle" :text="'取消发布'" @click="cancel" color="#999"
				:class="'custom-style'" v-if="userId && userId === goodsInfo.uid"></u-button>
			<u-button type="primary" :text="'联系对方'" shape="circle"
				color="linear-gradient(135.00deg, rgba(118,118,238,1.00) 0.321%,rgba(138,138,238,1.00) 100%)"
				@click="concat" :class="'custom-style'" v-if="userId && userId !== goodsInfo.uid"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "goods",
		data() {
			return {
				userId: this.$store.getters?.userInfo?.uid || '',
			};
		},
		props: {
			goodsInfo: {}
		},
		methods: {


			translateText(value) {
				let result = {
					desc: '',
					class: ''
				}

				switch (value) {
					case '0':
						result.desc = '联系卖家'
						result.class = 'selling'
						break
					case '1':
						result.desc = '交易完成'
						result.class = 'selled'
				}

				return result
			},

			concat() {
				if (this.goodsInfo.goodsStatus !== '0') {
					return
				}
				uni.makePhoneCall({
					phoneNumber: this.goodsInfo.phone
				});
			},
			cancel() {
				this.$http('get',
					`api/private/secondGoods/deleteGoods?goodsId=${this.goodsInfo.goodsId}`, {
						success: (res) => {
							this.$parent.getSecondList();
							this.$emit("cancelPublish");
						},
						successMsg: "取消发布成功！",
					})
			}
		}
	}

</script>

<style lang="scss">
	.goods {
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 0 7px #f1f1f1;
		background: #fff;

		.goods-view {
			display: flex;
		}

		.line {
			margin-top: 20px !important;
		}

		.button {
			margin-top: 10px;
			height: 30px;
			font-size: 14px;
			width: 80px;
			float: right;
		}



		.good-img {
			width: 80px;
			height: 80px;
			margin-right: 10px;
		}

		.name {
			color: #333333;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;

		}

		.introduce {
			margin-top: 4px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			font-size: 14px;
			color: #999;

		}

		.tag {
			font-size: 10px;
			padding: 0px 6px;
			height: 18px;
			color: #3c9cff;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			border-radius: 3px;
			border: 1px solid #3c9cff;
			margin-right: 4px;
		}

		.price {
			color: #e54d42;
			margin-top: 4px;
			font-size: 14px;
		}
	}

	.buttons {
		margin-top: 10px;
		display: flex;
		flex-direction: row;

		.custom-style {
			margin: 0 15px;
		}
	}

</style>

